<template>
  <div class="container">
    <div id="chart1"></div>
    <div id="chart2"></div>
    <div id="chart3"></div>
    <div id="chart4"></div>
    <div id="chart5"></div>
    <div id="chart6"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      up: {},
      first: true
    };
  },
  created() {
    this.getData();
    setInterval(() => {
        this.getData();
    },1000);
  },
  methods: {
    getData() {
      this.$http.get("http://localhost:9999/getDemoHtml").then((res) => {
        this.up = res.data;
        // if(this.first){
            this.drawChart();
        // }
        this.first = false;
      });
    },
    drawChart() {
      let chartDOM1 = document.getElementById("chart1");
      let chartDOM2 = document.getElementById("chart2");
      let chartDOM3 = document.getElementById("chart3");
      let chartDOM4 = document.getElementById("chart4");
      let chartDOM5 = document.getElementById("chart5");
      let chartDOM6 = document.getElementById("chart6");

      Plotly.newPlot(
        chartDOM1,
        [
          {
            x: this.up.x1,
            y: this.up.y1,
          },
        ],
        {
          margin: { t: 0 },
        }
      );
      Plotly.newPlot(
        chartDOM2,
        [
          {
            x: this.up.x2,
            y: this.up.y2,
          },
        ],
        {
          margin: { t: 0 },
        }
      );
      Plotly.newPlot(
        chartDOM3,
        [
          {
            x: this.up.x3,
            y: this.up.y3,
          },
        ],
        {
          margin: { t: 0 },
        }
      );
      Plotly.newPlot(
        chartDOM4,
        [
          {
            x: this.up.x4,
            y: this.up.y4,
          },
        ],
        {
          margin: { t: 0 },
        }
      );
      Plotly.newPlot(
        chartDOM5,
        [
          {
            x: this.up.x5,
            y: this.up.y5,
          },
        ],
        {
          margin: { t: 0 },
        }
      );
      Plotly.newPlot(
        chartDOM6,
        [
          {
            x: this.up.x6,
            y: this.up.y6,
          },
        ],
        {
          margin: { t: 0 },
        }
      );
    },
  },
};
</script>

<style>
</style>